<template>
	<div class="box">
		<div class="null-page" v-show="yes"></div>
		
		<el-card class="box-card order-list">
			<div slot="header" class="clearfix"><span>自提点列表</span></div>

			<el-tabs v-model="orderStatus" @tab-click="handleClick">
				<el-tab-pane label="商品清单" name="all"></el-tab-pane>
				<el-tab-pane label="相关订单" name="0"></el-tab-pane>
			</el-tabs>

			<div v-loading="loading">
                <el-input placeholder="请输入订单提货码" class="input-el" v-model="keywords" v-if="orderStatus == '0'" @change="getOrderList">
                    <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
                </el-input>
				<nav>
                    <li>商品名称</li>
					<li>价格</li>
					<li>数量</li>
                    <li>商家</li>
					<li v-if="orderStatus == '0'">状态</li>
                    <li v-if="orderStatus == '0'">提货码</li>
                    <li v-if="orderStatus == '0'">创建时间</li>
					<li v-if="orderStatus == '0'">订单号</li>
				</nav>

                

                <div class="list" v-if="orderGoods_list.length > 0 && orderStatus== 'all'">
                    <ul v-for="(orderItem, orderIndex) in orderGoods_list" :key="orderIndex">
							<li>
								 <span class="order-no">{{ orderItem.sku_name }}</span>
							</li>
							<li>
								<span class="order-no price-color">￥{{ orderItem.price }}</span>
							</li>
                            <li>
								<span class="order-no">{{ orderItem.num }}</span>
							</li>
                            <li>
								<router-link :to="'/shop-' + orderItem.site_id" target="_blank">{{ orderItem.site_name }}</router-link>
							</li>
						</ul>
				</div>

				<div class="list" v-if="orderList.length > 0 && orderStatus == '0'">
                    <ul v-for="(orderItem, orderIndex) in orderList" :key="orderIndex">
                        <span v-for="(goodsItem,goodsIndex) in orderItem.order_goods" :key="goodsIndex">
							<li>
								 <span class="order-no">{{ orderItem.order_name }}</span>
							</li>
							<li>
								<span class="order-no price-color">￥{{ orderItem.order_money }}</span>
							</li>
                            <li>
								<span class="order-no">{{ goodsItem.num }}</span>
							</li>
                            <li>
								<router-link :to="'/shop-' + orderItem.site_id" target="_blank">{{ orderItem.site_name }}</router-link>
							</li>
                            <li>
                                <span class="order-no">{{ orderItem.order_status_name }}</span>
                                <!-- v-if="orderItem.order_status == 5 && orderItem.order_type == 5" -->
                                <el-button  v-if="orderItem.order_status == 5 && orderItem.order_type == 5"><span class="order-no" @click="pickup(orderItem.order_id,delivery_id)">一键提货</span></el-button>
							</li>
                            <li>
                                <el-tooltip class="item" effect="dark" content="点击复制提货码" placement="bottom">
                                     <span class="order-no curor" @click="$util.copy(orderItem.access_code)">{{ orderItem.access_code }}</span>
                                </el-tooltip>
							</li>
							<li>
                                <span class="create-time">{{ $util.timeStampTurnTime(orderItem.create_time) }}</span>
							</li>
                            <li>
								<span class="order-no">{{ orderItem.order_no }}</span>
							</li>
                            </span>
						</ul>
                        
				</div>
				<div v-else-if="!loading && orderList.length == 0" class="empty-wrap">暂无相关订单</div>
			</div>
			<div class="pager">
				<el-pagination 
					background 
					:pager-count="5" 
					:total="total" 
					prev-text="上一页" 
					next-text="下一页" 
					:current-page.sync="currentPage" 
					:page-size.sync="pageSize" 
					@size-change="handlePageSizeChange" 
					@current-change="handleCurrentPageChange" 
					hide-on-single-page
				></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import {  order_list, orderGoods_list, oneKeypickup} from '@/api/member/pickup';
import orderMethod from '@/utils/orderMethod';
export default {
	name: 'pickup_list',
	components: {},
	data: () => {
		return {
			orderStatus: 'all',
			loading: true,
			orderList: [],
            orderGoods_list: [],
			currentPage: 1,
			pageSize: 10,
			total: 0,
			yes: true,
            status: 0,
            delivery_id:0,
            keywords: "",
		};
	},
	mixins: [orderMethod],
	created() {
		this.orderStatus = this.$route.query.status || 'all';
        this.delivery_id = this.$route.query.delivery_id || 0;
		this.getOrderList();
        this.getOrderGoodsList();
	},
	computed: {
		...mapGetters(['defaultGoodsImage'])
	},
	mounted() {
		let self = this;
		setTimeout(function() {
			self.yes = false
		}, 300)
	},
	methods: {
        pickup(o_id,d_id) {
            this.$confirm('确定要一键提货吗?', '一键提货', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {

					oneKeypickup({
						delivery_id: Number(d_id),
						order_id: o_id,
					})
						.then(res => {
							if(res.code == 0) {
								this.$message({
									type: 'success',
									message: '成功!'
								});
								this.refresh();
							}
						})
						.catch(err => {
							this.$message({
								type: 'info',
								message: '提货失败，请重新提货!'
							});  
						})


                    
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消'
                    });          
                });
        },
		handleClick(tab, event) {
			this.currentPage = 1;
			this.orderStatus = tab.name;
			this.refresh();
		},
        getOrderGoodsList() {
            orderGoods_list({
                delivery_id: this.delivery_id,
            })
                .then(res=>{
                    console.log(res,'dfkjekfjek');
                    if(res.code == 0 && res.data) {
                        this.orderGoods_list = res.data;
                    }
                })
                .catch(err=>{
                    conosle.log(err,'error')
                })
        },
		getOrderList() {
			order_list({
				page: this.currentPage,
				page_size: this.pageSize,
				delivery_id: this.delivery_id,
                keywords: this.keywords,
			})
				.then(res => {
					let list = [];
					if (res.code == 0 && res.data) {
						list = res.data.list;
						this.total = res.data.count;
					}
					this.orderList = list;
					this.loading = false;
				})
				.catch(res => {
					this.loading = false;
				});
		},
		handlePageSizeChange(size) {
			this.pageSize = size;
			this.refresh();
		},
		handleCurrentPageChange(page) {
			this.currentPage = page;
			this.refresh();
		},
		refresh() {
			this.loading = true;
			this.getOrderList();
		},
		operation(action, orderData) {
			let index = this.status;
			switch (action) {
				case 'orderPay': // 支付
					this.orderPay(orderData);
					break;
				case 'orderClose': //关闭
					this.orderClose(orderData.order_id, () => {
						this.refresh();
					});
					break;
				case 'memberTakeDelivery': //收货
					this.orderDelivery(orderData.order_id, () => {
						this.refresh();
					});
					break;
				case 'trace': //查看物流
					this.$router.push({ path: '/member/logistics', query: { order_id: orderData.order_id } });
					break;
				case 'memberOrderEvaluation': //评价
					this.$router.pushToTab({ path: '/evaluate', query: { order_id: orderData.order_id } });
					break;
			}
		},
		orderDetail(data) {
            this.$router.push({ path: '/member/pickup_detail', query: { order_id: data.order_id } });
		},
		imageError(orderIndex, goodsIndex) {
			this.orderList[orderIndex].order_goods[goodsIndex].sku_image = this.defaultGoodsImage;
		}
	}
};
</script>
<style lang="scss" scoped>
.curor{
    cursor: pointer;
    color:#ff547b;
}

.price-color {
    color:#ff547b;
}

.box {
	width: 100%;
	position: relative;
}

.null-page {
	width: 100%;
	height: 730px;
	background-color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}

.order-list {
	nav {
		overflow: hidden;
		padding: 10px 0;
		background: #fff;
		margin-bottom: 10px;
		border-bottom: 1px solid #eeeeee;
		li {
			float: left;
			&:nth-child(1) {
				width: 12.5%;
			}
			&:nth-child(2) {
				width: 12.5%;
			}
			&:nth-child(3) {
				width: 5%;
			}
			&:nth-child(4) {
				width: 12.5%;
			}
			&:nth-child(5) {
				width: 12.5%;
			}
			&:nth-child(6) {
				width: 12.5%;
			}
            &:nth-child(7) {
				width: 12.5%;
			}
		}
	}
	.list {
		.item {
			margin-bottom: 20px;
			border: 1px solid #eeeeee;
			border-top: 0;
			.head {
				padding: 8px 0px;
				background: #f7f7f7;
				font-size: 12px;

                span{
                    display: inline-block;
                    width:15%;
                }

				.create-time {
					//margin-right: 10px;
				}

				border-bottom: 1px solid #eeeeee;
				a {
					//margin: 0 10px 0 20px;
				}

				.order-type {
					//margin-left: 30px;
				}
			}
		}
		ul {
			background-color: #fff;
			padding: 10px;
            margin: 20px 0;
			overflow: hidden;
			li {
				float: left;
				line-height: 60px;
				&:nth-child(1) {
					width: 12.5%;
					line-height: 30px;
					.img-wrap {
						width: 60px;
						height: 60px;
						float: left;
						margin-right: 10px;
						cursor: pointer;
					}
					.info-wrap {
						margin-left: 70px;
						h5 {
							font-weight: normal;
							font-size: $ns-font-size-base;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							margin-right: 10px;
							display: inline-block;
							cursor: pointer;
							&:hover {
								color: $base-color;
							}
						}
						span {
							font-size: $ns-font-size-sm;
							color: #9a9a9a;
						}
					}
				}
				&:nth-child(2) {
					width: 12.5%;
                    line-height: 30px;
				}
				&:nth-child(3) {
					width: 5%;
                    line-height: 30px;
				}
				&:nth-child(4) {
					width: 12.5%;
                    line-height: 30px;
				}
				&:nth-child(5) {
					width: 12.5%;
					line-height: 30px;
					a {
						display: block;
					}
				}
				&:nth-child(6) {
					width: 12.5%;
					line-height: 30px;
					button {
						margin-left: 0;
						margin-bottom: 10px;
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
                &:nth-child(7) {
					width: 12.5%;
					line-height: 30px;
					button {
						margin-left: 0;
						margin-bottom: 10px;
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
	.empty-wrap {
		text-align: center;
		padding: 10px;
	}
    .input-el {
        width: 300px  !important;
    }
}
</style>
